<!--聚会预览-->
<template>
  <f7-page no-toolbar @page:beforeremove="onPageBeforeRemove">
    <f7-navbar back-link title="2019新年第一波自驾游" class="text-align-left">
    </f7-navbar>

    <f7-swiper style="height: 180px;" pagination>
      <f7-swiper-slide><img @click="onClick()" src="http://www.pptok.com/wp-content/uploads/2012/08/xunguang-4.jpg">
      </f7-swiper-slide>
      <f7-swiper-slide><img @click="onClick()" src="http://www.pptok.com/wp-content/uploads/2012/08/xunguang-4.jpg">
      </f7-swiper-slide>
      <f7-swiper-slide><img @click="onClick()"
                            src="http://img2.imgtn.bdimg.com/it/u=2097124721,3074829049&fm=26&gp=0.jpg">
      </f7-swiper-slide>
    </f7-swiper>

    <f7-block class="margin-top">
      <!--<f7-icon ios="f7:time" aurora="f7:time" md="material:time"></f7-icon>-->
      <p>2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波</p>
      <p><f7-icon f7="time" size="18px" class="padding-right"/>2019-01-20 周日 15:00-18:00</p>
      <p><f7-icon f7="placemark_fill" size="18px" class="padding-right"/>广东深圳南山区海岸城广场集合</p>
    </f7-block>
    <f7-list style="margin-top: -20px;" media-list>
      <f7-list-item mediaItem chevron-center
                    link="#"
                    title="大卫david"
                    subtitle="落情不是无情物，欢迎大家参加我的聚会！">
        <img slot="media" src="https://cdn.framework7.io/placeholder/fashion-88x88-1.jpg" width="50" style="border-radius: 50%;"/>
      </f7-list-item>
    </f7-list>
    <f7-block style="margin-top: -20px;">
      <p>这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
        这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
        这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
        这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
        这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
        这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
        这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
        这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
        这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
        这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
        这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
        这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
        这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
        这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
        这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
        这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
        这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
        这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
        这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
        这里是描述：2019深圳自驾游最后一波，2019深圳自驾游最后一波2019深圳自驾游最后一波
      </p>
    </f7-block>

    <f7-toolbar bottom>
      <f7-button style="color: white;width: 100%;margin: auto 5%;" class="col button button-fill button-round">暂存</f7-button>
      <f7-button style="color: white;width: 100%;margin: auto 5%;" class="col bg-color-green button button-fill button-round">马上发起</f7-button>
    </f7-toolbar>

  </f7-page>
</template>
<script>
  export default {
    data() {
      return {
        items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
        allowInfinite: true,
        showPreloader: true,
        popupOpened: false,
      };
    },
    methods: {
      onPageBeforeRemove() {
        const self = this;
        // Destroy popup when page removed
        if (self.popup) self.popup.destroy();
      },
      closeAlreadyPeople() {
        console.log("close popup");
        this.popupOpened = false;
      }
    },
  };
</script>
<style scoped>
  .test-content {
    margin: 0px;
  }
</style>
